<template>
  <div>
    <h4 class="boardName" @click="gotoThat">生产统计
      <a-icon type="right" />
    </h4>
    <div class=" lightBox progressdiv" style="height:380px; overflow-y: scroll;">
      <div >
      <h6>
        产量排名
      </h6>
      <div v-if="productrank.length>0">
        <div class="progressdivone" v-for="(item,index) in productrank" :key="index+'d'">
          <span class="progressOnename">{{item.macNumb}}</span>   <a-progress style="width:54%"  :percent="item.countRate" :format="percent =>formatPercent(percent,item)"/>
        </div>
      </div>
      <a-empty v-else/>

      <h6>
        运行时间排名
      </h6>
      <div>
        <div v-if="timerank.length>0">
          <div class="progressdivone" v-for="(item,index) in timerank" :key="index+'i'">
            <span class="progressOnename">{{item.macNumb}}</span>   <a-progress strokeColor="#FDBA00" style="width:54%"  :percent="item.timeRate" :format="percent =>formatPercent2(percent,item)"/>
          </div>
        </div>
        <a-empty v-if="timerank.length<=0"/>
      </div>

    </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "index",
  props:{
    productrank:{
      type:Array,
      default:()=>[]
    },
    timerank:{
      type:Array,
      default:()=>[]
    }
  },

  data(){
    return{

    }
  },
  watch:{
   
    productrank(val){
      return val
    },
    timerank(val){
      if(val){
 return val
      }else{
         return []
      }

    }
  },
  methods:{
    
  gotoThat(){
       this.$store.commit("board/HeadNavType", 2);
        localStorage.setItem("navType", 2);
        this.$router.push('/statistics');
    },

    formatPercent(percent,item){
      return item.count+'件'
    },
    formatPercent2(percent,item){
      return item.produceTime


    }
  }
};
</script>

<style scoped lang="less">
@import '../../light.less';
</style>
